<script setup lang="ts">
import { ref } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { randomColor } from '../../../utils/color'
import router from '../../../router'
import { useI18n } from 'vue-i18n'
import { Lang, MessageSchema } from '../../../locales'

const { t } = useI18n<{ message: MessageSchema }, Lang>()

const searchProject = ref<string>('')

interface Project {
  id: number
  projectName: string
  iconTitle: string
  iconColor: string
  path: string
}

const projects: Project[] = [
  {
    id: 1,
    projectName: 'VitePress-Vue3',
    iconTitle: 'VV',
    iconColor: randomColor(),
    path: '~/workspace/WdhcrViteProject/VitePress-Vue3'
  },
  {
    id: 2,
    projectName: 'VitePress-React',
    iconTitle: 'VR',
    iconColor: randomColor(),
    path: '~/workspace/WdhcrViteProject/VitePress-React'
  }
]

const createProject = () => {
  router.push('/createNew')
}
</script>

<template>
  <div class="container">
    <div class="top-container">
      <div class="top-bar">
        <div class="search-input">
          <a-input v-model:value="searchProject" width="100%" placeholder="Search projects">
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
        </div>
        <div class="create-btn">
          <a-button class="create-project-btn" @click="createProject">{{
            t('btn.newProject')
          }}</a-button>
        </div>
      </div>
      <a-divider />
    </div>
    <div class="middle-container">
      <a-list item-layout="horizontal" :data-source="projects">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta class="project-item" :description="item.path">
              <template #title>
                {{ item.projectName }}
              </template>
              <template #avatar>
                <a-avatar shape="square" size="" :style="{ backgroundColor: item.iconColor }">
                  {{ item.iconTitle }}
                </a-avatar>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="bottom-container"></div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.top-container {
  width: 100%;
}

.top-container :deep(.ant-divider-horizontal) {
  margin: 16px 0;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  width: 100%;
  padding-right: 20px;
}

.search-input :deep(.ant-input-affix-wrapper) {
  border-color: white !important;
  padding: 0 11px !important;
  height: 32px !important;
}

.ctrl-btn :deep(.ant-btn-default) {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.project-item {
  align-items: center !important;
}

.middle-container {
  height: 100vh;
  overflow-y: auto;
}
</style>
